import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Line, Point, Tooltip, getTheme, Axis } from 'bizcharts';
import data from '../../../../public/data';
const HousingPriceIndex = () => {
  const copyData = [...data.housingPriceIndexData];
  const sortData = copyData.sort((a, b) => b.value - a.value);
  const max = sortData[0].year;
  const min = sortData[sortData.length - 1].year;
  return (
    <>
      <Chart
        appendPadding={[10, 10, 10, 10]}
        autoFit
        height={300}
        style={{ padding: '30px' }}
        data={data.housingPriceIndexData}
        scale={{
          value: { min: 0, alias: '人均年收入', type: 'linear-strict' },
          year: { range: [0, 1] },
        }}
        defaultInteractions={[]}
      >
        <Axis
          name="year"
          // grid={null}
          tickLine={null}
          label={{
            style: {
              fill: 'white', // 文本的颜色
            },
          }}
        />
        <Axis name="value" grid={null} label={null} />
        <Line position="year*value" />
        <Point position="year*value" />
      </Chart>
      <p
        style={{
          fontSize: '16px',
          color: 'white',
          textIndent: '2em',
          marginTop: '20px',
          padding: '0 15px',
        }}
      >
        2018年1月至2021年12月，昆明市主城区及呈贡区住宅每月均价的同比增速变化情况如图所示。期间增速最快的为
        {max}，增速最慢的为{min}。
      </p>
    </>
  );
};
export default HousingPriceIndex;
